<script lang="ts" setup>
import { ref, computed, watch, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
    Search,
    Filter,
    Sort,
    Calendar,
    Location,
    MapLocation,
    Document,
    More,
    ArrowRight,
    ArrowLeft,
    CaretTop,
    Star,
    StarFilled,
    Bell,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const props = defineProps({
    // 是否显示详情面板
    showDetail: {
        type: Boolean,
        default: true,
    },
});

// 路由实例
const router = useRouter();

// 当前视图
const currentView = ref("list");

// 筛选与搜索
const searchKeyword = ref("");
const industryOptions = [
    { label: "全部行业", value: "" },
    { label: "互联网/IT", value: "互联网/IT" },
    { label: "金融", value: "金融" },
    { label: "教育", value: "教育" },
    { label: "医疗健康", value: "医疗健康" },
    { label: "制造业", value: "制造业" },
    { label: "房地产", value: "房地产" },
    { label: "咨询/服务", value: "咨询/服务" },
];
const selectedIndustry = ref("");

const activityOptions = [
    { label: "全部形式", value: "" },
    { label: "线下宣讲", value: "线下宣讲" },
    { label: "线上直播", value: "线上直播" },
    { label: "在线宣讲", value: "在线宣讲" },
];
const selectedActivityType = ref("");

const timeOptions = [
    { label: "全部时间", value: "" },
    { label: "今天", value: "today" },
    { label: "明天", value: "tomorrow" },
    { label: "本周", value: "this-week" },
    { label: "下周", value: "next-week" },
];
const selectedTimeRange = ref("");

// 排序方式
const sortOptions = [
    { label: "最新发布", value: "latest" },
    { label: "即将开始", value: "upcoming" },
    { label: "热门活动", value: "hot" },
];
const currentSort = ref("latest");

// 活动列表数据
const activityList = ref([
    {
        id: "1",
        companyName: "腾讯科技",
        companyLogo: "https://via.placeholder.com/50",
        companyIndustry: "互联网/IT",
        title: "2023秋季校园招聘宣讲会",
        startTime: "2023-11-15T14:00:00",
        endTime: "2023-11-15T17:00:00",
        location: "北京市海淀区清华大学就业中心",
        mode: "线下宣讲",
        tags: ["互联网", "名企"],
        status: "upcoming",
        targetSchools: ["清华大学", "北京大学"],
        isNew: true,
        participants: 248,
    },
    {
        id: "2",
        companyName: "阿里巴巴",
        companyLogo: "https://via.placeholder.com/50",
        companyIndustry: "电子商务",
        title: "2023秋季校园招聘",
        startTime: "2023-11-20T10:00:00",
        endTime: "2023-11-20T16:00:00",
        location: "杭州市西湖区浙江大学就业中心",
        mode: "线下宣讲",
        tags: ["互联网", "电商"],
        status: "upcoming",
        targetSchools: ["浙江大学", "杭州电子科技大学"],
        isNew: false,
        participants: 362,
    },
    {
        id: "3",
        companyName: "华为技术",
        companyLogo: "https://via.placeholder.com/50",
        companyIndustry: "通信/IT",
        title: "技术类专场招聘会",
        startTime: "2023-11-25T09:30:00",
        endTime: "2023-11-25T17:00:00",
        location: "线上宣讲",
        mode: "在线宣讲",
        tags: ["通信", "互联网", "硬件"],
        status: "upcoming",
        targetSchools: ["全国重点高校"],
        isNew: true,
        participants: 501,
    },
]);

// 当前选中的活动
const selectedActivityId = ref("");

// 计算属性：当前选中活动
const selectedActivity = computed(() => {
    return activityList.value.find((item) => item.id === selectedActivityId.value);
});

// 是否显示筛选抽屉（移动端）
const showFilterDrawer = ref(false);

// 是否加载中
const loading = ref(false);

// 是否已全部加载
const loadedAll = ref(false);

// 列表是否为空
const isEmpty = computed(() => {
    return filteredActivities.value.length === 0;
});

// 从本地加载更多数据（模拟API）
const loadMore = () => {
    if (loading.value || loadedAll.value) return;

    loading.value = true;
    setTimeout(() => {
        // 模拟加载更多数据
        // 实际项目中应调用API获取
        loading.value = false;
        loadedAll.value = true; // 演示设置为已加载全部
    }, 1000);
};

// 筛选后的活动列表
const filteredActivities = computed(() => {
    return activityList.value
        .filter((item) => {
            // 关键词筛选
            if (
                searchKeyword.value &&
                !item.title.includes(searchKeyword.value) &&
                !item.companyName.includes(searchKeyword.value)
            ) {
                return false;
            }

            // 行业筛选
            if (selectedIndustry.value && item.companyIndustry !== selectedIndustry.value) {
                return false;
            }

            // 活动形式筛选
            if (selectedActivityType.value && item.mode !== selectedActivityType.value) {
                return false;
            }

            // 时间筛选
            if (selectedTimeRange.value) {
                const today = new Date();
                today.setHours(0, 0, 0, 0);

                const tomorrow = new Date(today);
                tomorrow.setDate(tomorrow.getDate() + 1);

                const startOfWeek = new Date(today);
                startOfWeek.setDate(today.getDate() - today.getDay());

                const endOfWeek = new Date(startOfWeek);
                endOfWeek.setDate(startOfWeek.getDate() + 6);

                const startOfNextWeek = new Date(endOfWeek);
                startOfNextWeek.setDate(endOfWeek.getDate() + 1);

                const endOfNextWeek = new Date(startOfNextWeek);
                endOfNextWeek.setDate(startOfNextWeek.getDate() + 6);

                const activityDate = new Date(item.startTime);

                if (selectedTimeRange.value === "today" && (activityDate < today || activityDate >= tomorrow)) {
                    return false;
                }

                if (
                    selectedTimeRange.value === "tomorrow" &&
                    (activityDate < tomorrow || activityDate >= new Date(tomorrow.getTime() + 24 * 60 * 60 * 1000))
                ) {
                    return false;
                }

                if (
                    selectedTimeRange.value === "this-week" &&
                    (activityDate < startOfWeek || activityDate > endOfWeek)
                ) {
                    return false;
                }

                if (
                    selectedTimeRange.value === "next-week" &&
                    (activityDate < startOfNextWeek || activityDate > endOfNextWeek)
                ) {
                    return false;
                }
            }

            return true;
        })
        .sort((a, b) => {
            // 排序
            if (currentSort.value === "latest") {
                // 按发布时间排序（在实际项目中可能有独立的发布时间字段）
                return new Date(b.startTime).getTime() - new Date(a.startTime).getTime();
            }

            if (currentSort.value === "upcoming") {
                // 按开始时间排序
                return new Date(a.startTime).getTime() - new Date(b.startTime).getTime();
            }

            if (currentSort.value === "hot") {
                // 按参与人数排序
                return b.participants - a.participants;
            }

            return 0;
        });
});

// 格式化日期
const formatDate = (dateString) => {
    const date = new Date(dateString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(
        2,
        "0"
    )}`;
};

// 格式化时间
const formatTime = (dateString) => {
    const date = new Date(dateString);
    return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
};

// 选择活动
const selectActivity = (id) => {
    selectedActivityId.value = id;
};

// 查看活动详情
const viewActivityDetail = (id) => {
    router.push({
        path: "/schoolHireInfo",
        query: { id },
    });
};

// 收藏活动
const toggleFavorite = (id, event) => {
    if (event) {
        event.stopPropagation();
    }

    // 在真实应用中，这里应调用API更新收藏状态
    ElMessage.success("活动收藏状态已更新");
};

// 报名活动
const applyForActivity = (id, event) => {
    if (event) {
        event.stopPropagation();
    }

    // 在真实应用中，这里应调用API进行报名
    ElMessage.success("报名成功");
};

// 重置筛选条件
const resetFilters = () => {
    searchKeyword.value = "";
    selectedIndustry.value = "";
    selectedActivityType.value = "";
    selectedTimeRange.value = "";
    currentSort.value = "latest";
};

// 监听筛选条件变化
watch([searchKeyword, selectedIndustry, selectedActivityType, selectedTimeRange, currentSort], () => {
    // 当筛选条件变化时，重新加载数据（实际应用中调用API）
    loadedAll.value = false;

    // 如果有数据，默认选中第一项
    if (filteredActivities.value.length > 0 && !selectedActivity.value) {
        selectActivity(filteredActivities.value[0].id);
    }
});

// 组件挂载时，选中第一项
onMounted(() => {
    if (activityList.value.length > 0) {
        selectActivity(activityList.value[0].id);
    }
});
</script>

<template>
    <div class="recruitment-activities">
        <!-- 顶部筛选栏 -->
        <el-card shadow="hover" class="filter-card">
            <el-row :gutter="20" align="middle">
                <!-- 视图切换 -->
                <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="3">
                    <el-radio-group v-model="currentView" size="small" class="view-switch">
                        <el-radio-button label="list">
                            <el-icon><Document /></el-icon> 列表
                        </el-radio-button>
                        <el-radio-button label="calendar">
                            <el-icon><Calendar /></el-icon> 日历
                        </el-radio-button>
                        <el-radio-button label="map">
                            <el-icon><Location /></el-icon> 地图
                        </el-radio-button>
                    </el-radio-group>
                </el-col>

                <!-- 搜索框 -->
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7" class="search-col">
                    <el-input
                        v-model="searchKeyword"
                        placeholder="搜索招聘活动/公司..."
                        clearable
                        :prefix-icon="Search"
                        class="search-input"
                    />
                </el-col>

                <!-- 筛选区域(桌面) -->
                <el-col :xs="0" :sm="0" :md="12" :lg="12" :xl="14" class="desktop-filters">
                    <el-row :gutter="10" justify="end" align="middle">
                        <!-- 行业筛选 -->
                        <el-col :md="7" :lg="6" :xl="5">
                            <el-select v-model="selectedIndustry" placeholder="行业" clearable class="filter-select">
                                <el-option
                                    v-for="item in industryOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-col>

                        <!-- 活动形式筛选 -->
                        <el-col :md="7" :lg="6" :xl="5">
                            <el-select
                                v-model="selectedActivityType"
                                placeholder="活动形式"
                                clearable
                                class="filter-select"
                            >
                                <el-option
                                    v-for="item in activityOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-col>

                        <!-- 时间筛选 -->
                        <el-col :md="7" :lg="6" :xl="5">
                            <el-select v-model="selectedTimeRange" placeholder="时间" clearable class="filter-select">
                                <el-option
                                    v-for="item in timeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>

                <!-- 移动端筛选按钮 -->
                <el-col :xs="24" :sm="24" :md="0" class="mobile-filter-buttons">
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-select v-model="selectedIndustry" placeholder="行业" clearable class="filter-select">
                                <el-option
                                    v-for="item in industryOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-select
                                v-model="selectedActivityType"
                                placeholder="活动形式"
                                clearable
                                class="filter-select"
                            >
                                <el-option
                                    v-for="item in activityOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-select v-model="selectedTimeRange" placeholder="时间" clearable class="filter-select">
                                <el-option
                                    v-for="item in timeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <!-- 排序与筛选重置区域 -->
            <el-row class="sort-row">
                <el-col :span="12">
                    <el-radio-group v-model="currentSort" size="small" class="sort-group">
                        <el-radio-button v-for="option in sortOptions" :key="option.value" :label="option.value">
                            {{ option.label }}
                        </el-radio-button>
                    </el-radio-group>
                </el-col>
                <el-col :span="12" class="reset-col">
                    <el-button type="info" plain size="small" @click="resetFilters"> 重置筛选 </el-button>
                </el-col>
            </el-row>
        </el-card>

        <!-- 主内容区 -->
        <div v-if="currentView === 'list'" class="main-content">
            <el-row :gutter="16">
                <!-- 活动列表区域 -->
                <el-col :xs="24" :sm="24" :md="showDetail ? 12 : 24" :lg="showDetail ? 10 : 24">
                    <div class="activity-list-container">
                        <div class="result-stats">
                            <span class="result-count">
                                共找到 <span class="highlight">{{ filteredActivities.length }}</span> 个校园招聘活动
                            </span>
                        </div>

                        <!-- 列表内容 -->
                        <div
                            v-infinite-scroll="loadMore"
                            :infinite-scroll-disabled="loading || loadedAll"
                            class="activity-list"
                        >
                            <!-- 空状态 -->
                            <el-empty v-if="isEmpty" description="没有找到符合条件的招聘活动" />

                            <!-- 活动卡片 -->
                            <el-card
                                v-for="activity in filteredActivities"
                                :key="activity.id"
                                shadow="hover"
                                class="activity-card"
                                :class="{ 'is-selected': selectedActivityId === activity.id }"
                                @click="selectActivity(activity.id)"
                            >
                                <!-- 新活动标签 -->
                                <el-tag v-if="activity.isNew" class="new-tag" type="danger" size="small" effect="dark">
                                    新
                                </el-tag>

                                <!-- 公司信息 -->
                                <div class="company-info">
                                    <el-avatar :size="40" :src="activity.companyLogo" class="company-logo" />
                                    <div class="company-details">
                                        <h3 class="company-name">{{ activity.companyName }}</h3>
                                        <el-tag size="small" effect="plain" class="industry-tag">
                                            {{ activity.companyIndustry }}
                                        </el-tag>
                                    </div>
                                </div>

                                <!-- 活动标题 -->
                                <h2 class="activity-title">{{ activity.title }}</h2>

                                <!-- 活动信息 -->
                                <div class="activity-info">
                                    <!-- 时间 -->
                                    <div class="info-item">
                                        <el-icon color="#409EFF"><Calendar /></el-icon>
                                        <span>
                                            {{ formatDate(activity.startTime) }}
                                            {{ formatTime(activity.startTime) }}-{{ formatTime(activity.endTime) }}
                                        </span>
                                    </div>

                                    <!-- 地点 -->
                                    <div class="info-item">
                                        <el-icon color="#67C23A"><Location /></el-icon>
                                        <span>{{ activity.location }}</span>
                                        <el-tag size="small" effect="plain" class="mode-tag">
                                            {{ activity.mode }}
                                        </el-tag>
                                    </div>

                                    <!-- 目标学校 -->
                                    <div class="schools-container">
                                        <div class="info-label">
                                            <el-icon><Document /></el-icon>
                                            目标院校:
                                        </div>
                                        <div class="school-tags">
                                            <el-tag
                                                v-for="(school, index) in activity.targetSchools"
                                                :key="index"
                                                size="small"
                                                effect="light"
                                                class="school-tag"
                                            >
                                                {{ school }}
                                            </el-tag>
                                        </div>
                                    </div>
                                </div>

                                <!-- 操作区域 -->
                                <div class="activity-actions">
                                    <div class="tag-area">
                                        <el-tag
                                            v-for="(tag, index) in activity.tags"
                                            :key="index"
                                            :type="tag === '名企' ? 'danger' : 'info'"
                                            size="small"
                                            effect="plain"
                                            class="activity-tag"
                                        >
                                            {{ tag }}
                                        </el-tag>
                                    </div>

                                    <div class="button-area">
                                        <el-button size="small" circle @click="toggleFavorite(activity.id, $event)">
                                            <el-icon><Star /></el-icon>
                                        </el-button>

                                        <el-button type="primary" size="small" @click="viewActivityDetail(activity.id)">
                                            详情 <el-icon class="el-icon--right"><ArrowRight /></el-icon>
                                        </el-button>
                                    </div>
                                </div>

                                <!-- 状态标签 -->
                                <div class="status-badge" :class="activity.status">
                                    {{
                                        activity.status === "upcoming"
                                            ? "即将开始"
                                            : activity.status === "ongoing"
                                            ? "正在进行"
                                            : "已结束"
                                    }}
                                </div>
                            </el-card>

                            <!-- 加载状态 -->
                            <div v-if="loading" class="loading-container">
                                <el-skeleton :rows="3" animated />
                            </div>

                            <!-- 全部加载完毕 -->
                            <el-empty
                                v-if="loadedAll && !isEmpty"
                                description="没有更多了"
                                :image-size="80"
                                class="no-more"
                            />
                        </div>
                    </div>
                </el-col>

                <!-- 详情区域 -->
                <el-col v-if="showDetail" :xs="24" :sm="24" :md="12" :lg="14" class="detail-column">
                    <el-card shadow="hover" class="detail-card">
                        <!-- 如果无选中活动 -->
                        <div v-if="!selectedActivity" class="no-selection">
                            <el-empty description="请选择一个招聘活动查看详情" :image-size="200" />
                        </div>

                        <!-- 如果有选中活动 -->
                        <div v-else class="activity-detail">
                            <el-skeleton :rows="10" animated v-if="!selectedActivity" />

                            <template v-else>
                                <!-- 活动标题和公司信息 -->
                                <div class="detail-header">
                                    <el-row align="middle">
                                        <el-col :span="4">
                                            <el-avatar
                                                :size="60"
                                                :src="selectedActivity.companyLogo"
                                                class="detail-logo"
                                            />
                                        </el-col>
                                        <el-col :span="20">
                                            <h2 class="detail-title">{{ selectedActivity.title }}</h2>
                                            <div class="detail-company">{{ selectedActivity.companyName }}</div>
                                        </el-col>
                                    </el-row>
                                </div>

                                <!-- 活动信息卡片 -->
                                <el-descriptions title="活动信息" :column="1" border class="detail-descriptions">
                                    <el-descriptions-item label="活动时间">
                                        {{ formatDate(selectedActivity.startTime) }}
                                        {{ formatTime(selectedActivity.startTime) }} -
                                        {{ formatTime(selectedActivity.endTime) }}
                                    </el-descriptions-item>

                                    <el-descriptions-item label="活动地点">
                                        {{ selectedActivity.location }}
                                    </el-descriptions-item>

                                    <el-descriptions-item label="活动形式">
                                        {{ selectedActivity.mode }}
                                    </el-descriptions-item>

                                    <el-descriptions-item label="目标学校">
                                        <el-space wrap>
                                            <el-tag
                                                v-for="school in selectedActivity.targetSchools"
                                                :key="school"
                                                size="small"
                                            >
                                                {{ school }}
                                            </el-tag>
                                        </el-space>
                                    </el-descriptions-item>
                                </el-descriptions>

                                <!-- 下方描述文本区域 -->
                                <div class="detail-description">
                                    <h3>活动内容</h3>
                                    <div class="detail-text">
                                        本次宣讲会将介绍{{ selectedActivity.companyName }}2024届校园招聘计划，
                                        包括公司概况、产品方向、招聘岗位、薪资福利等信息。
                                        宣讲会后有提问环节和简历投递机会。 <br /><br />
                                        请有意向的同学携带简历准时参加！
                                    </div>
                                </div>

                                <!-- 详情页操作按钮 -->
                                <div class="detail-actions">
                                    <el-button
                                        type="warning"
                                        @click="applyForActivity(selectedActivity.id, $event)"
                                        :icon="Bell"
                                    >
                                        立即报名
                                    </el-button>

                                    <el-button @click="toggleFavorite(selectedActivity.id, $event)" :icon="Star">
                                        收藏
                                    </el-button>

                                    <el-button type="primary" @click="viewActivityDetail(selectedActivity.id)">
                                        查看完整详情
                                    </el-button>
                                </div>
                            </template>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 日历视图（占位） -->
        <div v-else-if="currentView === 'calendar'" class="calendar-view">
            <el-card shadow="hover" class="calendar-card">
                <el-empty description="日历视图功能开发中">
                    <template #image>
                        <el-icon :size="60"><Calendar /></el-icon>
                    </template>
                </el-empty>
            </el-card>
        </div>

        <!-- 地图视图（占位） -->
        <div v-else class="map-view">
            <el-card shadow="hover" class="map-card">
                <el-empty description="地图视图功能开发中">
                    <template #image>
                        <el-icon :size="60"><MapLocation /></el-icon>
                    </template>
                </el-empty>
            </el-card>
        </div>
    </div>
</template>

<style scoped>
.recruitment-activities {
    width: 100%;
}

/* 筛选卡片区域 */
.filter-card {
    margin-bottom: 20px;
}

.filter-card :deep(.el-card__body) {
    padding: 15px;
}

.view-switch {
    width: 100%;
}

.search-col {
    margin: 10px 0;
}

.search-input {
    width: 100%;
}

.filter-select {
    width: 100%;
}

.desktop-filters {
    text-align: right;
}

.mobile-filter-buttons {
    margin-top: 10px;
}

.sort-row {
    margin-top: 15px;
    display: flex;
    align-items: center;
}

.sort-group {
    font-size: 12px;
}

.reset-col {
    display: flex;
    justify-content: flex-end;
}

/* 活动列表区域 */
.result-stats {
    margin-bottom: 15px;
    color: #606266;
    font-size: 14px;
}

.highlight {
    color: #409eff;
    font-weight: bold;
}

.activity-list {
    height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 5px;
}

.activity-card {
    margin-bottom: 15px;
    position: relative;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    overflow: visible;
}

.activity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.activity-card.is-selected {
    border-left: 3px solid #409eff;
    background-color: #f0f9ff;
}

.new-tag {
    position: absolute;
    top: -8px;
    right: 12px;
    transform: rotate(15deg);
    z-index: 1;
}

/* 卡片内容布局 */
.company-info {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.company-logo {
    margin-right: 12px;
    border: 1px solid #ebeef5;
}

.company-details {
    flex: 1;
}

.company-name {
    font-size: 15px;
    margin: 0 0 4px 0;
    color: #606266;
}

.industry-tag {
    font-size: 12px;
}

.activity-title {
    font-size: 16px;
    margin: 0 0 12px 0;
    color: #303133;
    line-height: 1.4;
}

.activity-info {
    margin-bottom: 15px;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #606266;
    font-size: 14px;
}

.info-item .el-icon {
    margin-right: 8px;
}

.mode-tag {
    margin-left: 8px;
}

.schools-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 10px;
}

.info-label {
    display: flex;
    align-items: center;
    color: #909399;
    font-size: 13px;
    margin-right: 8px;
}

.info-label .el-icon {
    margin-right: 4px;
}

.school-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.school-tag {
    margin-right: 0;
}

.activity-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #ebeef5;
}

.tag-area {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.activity-tag {
    margin-right: 0;
}

.button-area {
    display: flex;
    gap: 8px;
    align-items: center;
}

.status-badge {
    position: absolute;
    top: 12px;
    right: -5px;
    background-color: #909399;
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px 0 0 4px;
}

.status-badge:after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    border-style: solid;
    border-width: 0 5px 5px 0;
    border-color: transparent #606266 transparent transparent;
}

.status-badge.upcoming {
    background-color: #e6a23c;
}

.status-badge.upcoming:after {
    border-color: transparent #b88230 transparent transparent;
}

.status-badge.ongoing {
    background-color: #67c23a;
}

.status-badge.ongoing:after {
    border-color: transparent #529b2e transparent transparent;
}

.loading-container {
    padding: 10px;
    margin-bottom: 10px;
}

.no-more {
    margin: 20px 0;
    opacity: 0.6;
}

/* 详情区域 */
.detail-column {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.detail-card {
    height: calc(100vh - 220px);
    overflow-y: auto;
}

.detail-card :deep(.el-card__body) {
    padding: 20px;
    height: 100%;
}

.no-selection {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.detail-header {
    margin-bottom: 20px;
}

.detail-logo {
    border: 1px solid #ebeef5;
    background-color: #f5f7fa;
}

.detail-title {
    font-size: 18px;
    margin: 0 0 8px 0;
    color: #303133;
}

.detail-company {
    font-size: 14px;
    color: #606266;
}

.detail-descriptions {
    margin-bottom: 20px;
}

.detail-description {
    margin-bottom: 30px;
}

.detail-description h3 {
    font-size: 16px;
    margin: 0 0 10px 0;
    color: #303133;
}

.detail-text {
    font-size: 14px;
    line-height: 1.6;
    color: #606266;
}

.detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* 日历和地图视图占位符 */
.calendar-view,
.map-view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
}

.calendar-card,
.map-card {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .view-switch {
        margin-bottom: 10px;
    }

    .detail-column {
        margin-top: 15px;
        position: static;
    }

    .detail-card {
        height: auto;
        max-height: 600px;
    }

    .activity-list {
        height: 500px;
    }

    .sort-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sort-group {
        width: 100%;
        margin-bottom: 10px;
    }

    .reset-col {
        justify-content: center;
    }

    .detail-actions {
        flex-wrap: wrap;
    }

    .detail-actions .el-button {
        flex: 1;
    }
}
</style>
